<template>
  <div class="box">
      <hearder :navNumber="1"></hearder>
      <img class="xt-d-block" src="http://cdn.napai.cn/wapact_2021_0427_608786727d372.jpg" />
      <img class="xt-d-block" src="http://cdn.napai.cn/wapact_2021_0427_608786734f4d4.jpg" />

      <div class="box-content xt-pt-2">
        <div class="box-content-title xt-flex-center-item xt-text-danger">
          <a class="box-content-nav">摄影预定</a>
        </div>
        <div class="box-content-form">
          <select class="box-content-form-select xt-p-1 xt-m-1" v-model="FuzhuangNumber">
            <option :value="index" v-for="(item,index) in garmentTypeList" :key="index">
              服装名称：{{ item.Ftype }} 服装价格：{{ item.Fmoney }}
            </option>
          </select>

          <select class="box-content-form-select xt-p-1 xt-m-1" v-model="SheyinshiNumber">
            <option :value="index" v-for="(item,index) in cameramanList" :key="index">
              姓名： {{ item.Sname }} 从业时间：{{ item.Sjobtime }} 等级：{{ item.Sgrade }} 价格：{{ item.Smoney }}
            </option>
          </select>
          <input type="text" v-model="ShootingTime"  class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入拍摄日期" />
          <input type="text" v-model="FilmCity" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入拍摄地址" />
          <div class="box-content-form-btn xt-p-1 xt-flex-center-item xt-bg-info xt-mt-5" @click="orderList()">预约</div>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import hearder from '../components/hearder.vue'
import Axios from 'axios'

@Component({
  components: {
    hearder
  },
})
export default class Home extends Vue{
  garmentTypeList:any = []; // 服装类型
  FuzhuangNumber:number = 0;
  ShootingTime:string = '' // 拍摄日期
  FilmCity:string = '' // 拍摄城市

  cameramanList:any = []; // 摄影师
  SheyinshiNumber:number = 0;

  created(){
    this.getdataList();
    this.gitCameraman();
  }


  // 提交预约信息
  orderList(){
    if(this.ShootingTime === '' || this.FilmCity === ''){
      return alert('以上文本不能为空');
    }

    const { userId, username, usernumber } = JSON.parse(window.localStorage.cyxUser);
    const { Fuzhuangid,Ftype, Fmoney } = this.garmentTypeList[this.FuzhuangNumber];
    const { Sheyinshiid, Sname, Sgrade, Smoney, Snumber } = this.cameramanList[this.SheyinshiNumber];

    const price = (Fmoney*1) + (Smoney*1); // 结算价格

    const orderNumber = ((new Date()).getTime()) + (userId).toString();

    const param = {
      userId, // 用户id
      userTel:usernumber,  // 客户手机号码
      userName:username,  // 客户姓名
      Oreservetime: (new Date()).getTime(),  // 提交预约时间
      Osuretime:'',  // 确定订单时间
      CameramanId: Sheyinshiid,  // 摄影师id
      sheyinshiName: Sname,  // 摄影师姓名
      sheyinshiDj: Sgrade,  // 摄影师等级
      sheyinshiTel: Snumber,  // 摄影师联系方式
      ClothingId: Fuzhuangid,  // 服装类型id
      ClothingName: Ftype, // 服装类型名称
      Omoney: price,     // 结算价格
      Orderid: orderNumber,   // 订单编号
      OrderState:1,  // 订单状态
      ShootingTime: this.ShootingTime, 
      FilmCity: this.FilmCity,
    }

    Axios.post('/order/add', param)
    .then((res:any)=>{
      if(res.data.code === 200){
        alert(res.data.data);
        (this as any).$router.push({
          path:'/my'
        });
        return 
      }
      alert(res.data.data)
    })
  }
  
  // 获取服装类型数据
  getdataList(){
    Axios.get('/web/Fuzhuang')
    .then((res:any)=>{
      if(res.data.code === 200){
        this.garmentTypeList = res.data.data;
        return;
      }
      alert('数据查询异常，请稍后再试')
    })
  }

  // 获取摄影师信息
  gitCameraman(){
    Axios.get('/web/sheyinshi')
    .then((res:any)=>{
      if(res.data.code === 200){
        this.cameramanList = res.data.data;
        return;
      }
      alert('数据查询异常，请稍后再试')
    })
  }
}
</script> 
<style scoped lang="less">
  .box{
      position: relative;
  
      &-content{
        position: absolute;
        top:150px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: 700px;
        height: 500px;
        background: rgba(255, 255, 255, 0.7);
      &-title{
        font-size: 20px;
      }
      &-active{
        border-bottom: 2px solid #0f6674;
      }

      &-form{
        display: flex;
        align-items: center;
        flex-direction: column;

        &-select{
          display: block;
          width: 520px;
          height: 50px;
          outline: none;
          border:none;
        }

        &-input{
          display: block;
          width: 500px;
          height: 30px;
          outline: none;
          border:none;
        }
        &-btn{
          width: 500px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }
</style>

